<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: YaYa
 * @LastEditTime: 2022-06-28 21:59:58
-->
<template>
  <div class="List">
    <div class="button">
      <el-button class="btn" @click="toAdd">上报</el-button>
    </div>
    <div class="search">
      <el-input placeholder="请输入城市名称" v-model="cityName" clearable>
      </el-input>
      <!-- 搜索按钮 -->
      <el-button @click="allData" class="sch" type="primary">搜索</el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="country" label="国" width="80" align="center">
        </el-table-column>
        <el-table-column prop="province" label="省" width="80" align="center">
        </el-table-column>
        <el-table-column prop="city" label="市" width="80" align="center">
        </el-table-column>
        <el-table-column prop="area" label="区"> </el-table-column>
        <el-table-column
          prop="confirmed"
          label="新增确诊"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column label="疑似" width="80" align="center">
          <template v-slot:default="scope">
            <el-tag type="warning" size="mini">{{
              scope.row.suspected
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="死亡" width="80" align="center">
          <template v-slot:default="scope">
            <el-tag type="info" size="mini">{{ scope.row.dead }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="治愈" width="80" align="center">
          <template v-slot:default="scope">
            <el-tag type="success" size="mini">{{ scope.row.cure }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="severe" label="重症" width="80" align="center">
          <template v-slot:default="scope">
            <el-tag type="danger" size="mini">{{ scope.row.severe }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="outside"
          label="境外输入"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="上报时间"
          width="120"
          align="center"
        >
          <template v-slot:default="scope">
            {{ scope.row.inputTime | fmtDate }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      @current-change="currentChangeHandler"
      :current-page.sync="page"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      // 数据
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 10,
      // 搜索城市名称
      cityName: "",
    };
  },
  created() {
    this.allData();
  },
  methods: {
    //加载疫情数据
    async allData() {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        total: this.total,
        province: this.cityName,
      };
      //发送请求
      let res = await get("/epidemic/pageQuery", params);
      //console.log(res.data.list);
      this.tableData = res.data.list;
    },
    // 添加
    toAdd() {
      this.$router.push({
        path: "/data/input",
      });
    },
    // 分页
    currentChangeHandler(page) {
      this.page = page;
      this.loadEpidemicData();
    },
  },
};
</script>

<style scoped>
.List .button {
  margin-left: 5px;
}
.List .button .btn {
  width: 60px;
  line-height: 8px;
  background-color: #2cb5ac;
  color: #fff;
  border-color: #56c4bd;
  padding-left: 12px;
}
.search {
  display: flex;
  width: 33%;
  margin-top: 5px;
}
.search .sch {
  margin-left: 5px;
}
</style>
